<!DOCTYPE html>
<html><head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 游戏循环机制</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css">
</head>
<body>
	<div id="header-background"> </div>
	<div id="page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png"> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id="doc-nav">
		<ul id="doc-level-one">
			<li>
				Topics
				<ul>
					<li>
						<a href="../documentation/">
							文档
						</a>
					</li>
					<li>
						<a href="../documentation/entities.html">
							实体
						</a>
					</li>
					<li>
						<a href="../documentation/events.html">
							事件
						</a>
					</li>
					<li>
						<a href="../documentation/components.html">
							组件
						</a>
					</li>
					<li>
						<a href="../documentation/2d.html">
							2D绘图
						</a>
					</li>
					<li>
						<a href="../documentation/text.html">
							文本
						</a>
					</li>
					<li>
						<a href="../documentation/keyboard.html">
							键盘
						</a>
					</li>
					<li>
						<a href="../documentation/mouse.html">
							鼠标
						</a>
					</li>
					<li>
						<a href="../documentation/sound.html">
							声音
						</a>
					</li>
					<li>
						<a href="../documentation/sprites.html">
							精灵
						</a>
					</li>
					<li>
						<a href="../documentation/scenes.html">
							场景
						</a>
					</li>
					<li>
						<a href="../documentation/gameloop.html">
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="doc-content" class="markdown">
		

		<h2> 游戏循环机制 </h2>
<p>Crafty 的游戏循环使用 <a href="../api/Crafty-timer.html#Crafty-timer-step">Crafty.timer.step</a> 实现。它使用全局事件与引擎的其余部分进行通信。如果可用，底层的游戏循环使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame"><code>requestAnimationFrame</code></a> , 包括以下几个阶段:</p>
<ul>
<li>一次或多次的调用 "EnterFrame" 来推进游戏状态。</li>
<li>调用 "RenderScene" 渲染每一个层。</li>
</ul>
<p>一切都由 "EnterFrame" 解决之前的场景渲染，例如，如果你移动一个对象好几次在一个单一的事件，只有最后的位置将是可见的。</p>
<p>还有一些用于基准测试和细粒度控制的其他事件，但以上两个事件是最重要的。 </p>
<h2 id="enterframe">EnterFrame</h2>
<p>绑定到该事件的函数通过一个具有几个属性的对象传递，其中只有几个属性是非常重要的： </p>
<pre><code>data = {
    <span class="hljs-attr">frame</span>: frameNumber <span class="hljs-comment">// the number of frames since Crafty.init()</span>
    dt: ms <span class="hljs-comment">// the time in ms which has passed since the last "EnterFrame" event</span>
}</code></pre>
<p>所有的游戏逻辑，即任何随时间的变化，最终挂载到 "EnterFrame" 事件。为了简化这种交互，存在许多组件（如 <a href="../api/Tween.html">"Tween"</a> ），但为了提供自定义行为，您可能最终将实体直接绑定到该事件。如果你想提供平滑的行为，你应该使用 <code>dt</code> 属性来决定游戏状态应该前进多远。举个简单的例子，这里有一个红色方块，它将以每秒10像素的速度移动到右边：</p>
<pre><code>Crafty.init(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>);
<span class="hljs-keyword">var</span> square = Crafty.e(<span class="hljs-string">'2D, Canvas, Color'</span>);
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>})
  .color(<span class="hljs-string">'red'</span>)
  .bind(<span class="hljs-string">"EnterFrame"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">eventData</span>) </span>{
    <span class="hljs-comment">// Move to the right by 10 pixels per second</span>
    <span class="hljs-keyword">this</span>.x = <span class="hljs-keyword">this</span>.x + <span class="hljs-number">10</span> * (eventData.dt / <span class="hljs-number">1000</span>);
  };</code></pre>
<h2 id="renderscene">RenderScene</h2>
<p>渲染成像 "Canvas" 和 "DOM" 都会监听这个事件来确保你看到游戏进行的状态。最为最终的 "EnterFrame" 事件，除非你实现自定义的渲染层，否则永远不需要绑定到这个事件。</p>
<h2 id="crafty-timer-steptype">Crafty.timer.steptype</h2>
<p><a href="../api/Crafty-timer.html#Crafty-timer-steptype">Crafty.timer.steptype</a> 函数可以让你控制 "EnterFrame" 消耗的时间。这是一个非常复杂的课题；要深入的讨论, 参见 Glenn Fiedler 的 <a href="http://gafferongames.com/game-physics/fix-your-timestep/">Fix Your Timestep </a> 一文。</p>
<p>Crafty 有一个默认固定的时间单位，它是通过多次 "EnterFrame" 时间放缓实现的，但这也是可以定制的。参见方法文档的详细描述!</p>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png">
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png">
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png">
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			© Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>


</body></html>